import { DirectiveBinding } from 'vue';
import { useUserStore } from '@/store';
import _ from 'lodash';

// 判断权限
// 支持数组及字符串，如v-permission="'sys:role:remove'" 或者 v-permission="['sys:role:remove','sys:role:edit']"
function checkPermission(el: HTMLElement, binding: DirectiveBinding) {
  const { value } = binding;
  const userStore = useUserStore();
  const { permissions } = userStore;
  // 如果没有父元素，则抛出异常
  if (!el || !el.parentNode) {
    throw new Error(`el or el.parentNode is null!`);
  }
  // 如果没有权限值，则抛出异常
  if (!value || value === '') {
    throw new Error(`permission value is null or empty`);
  }
  // 如果权用户限为空，则删除当前元素
  if (!permissions) {
    el.parentNode.removeChild(el);
    return;
  }
  let permissionValues: string[] = [];
  if (Array.isArray(value)) {
    permissionValues = value;
  } else {
    permissionValues = [value]
  }
  const hasPermission:string[] = _.intersection(permissions, permissionValues);
  if (hasPermission.length === 0) {
    el.parentNode.removeChild(el);
  }
}

/**
 * 权限判断是否能看到这个按钮，同时后端也做了校验，前端只是显示与不显示
 * @param {string, array} data 按钮的权限点，可以是单个字符串，也可以是数组
 * @param {string} rule or代表或，and代表与
 * 使用方法：
 * 例如 buttonCodeList 的数据为： ['button1', 'button2', 'button3']
 * 想要判断 button1 的权限，可以写成：hasPermission('button1')
 */
export const hasPermission = (data: string | string[], rule: string = 'or') => {
  if (!data) {
    return false
  }
  const userInfo = useUserStore().userInfo
  if (!userInfo) {
    return false
  }
  const { permissions } = userInfo
  if (!permissions) {
    return false
  }
  if (Array.isArray(data)) {
    const fn = rule === 'or' ? 'some' : 'every'
    return data[fn]((item) => permissions.includes(item))
  }
  return permissions.includes(data)
}


export default {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    checkPermission(el, binding);
  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    checkPermission(el, binding);
  },
};
